<template>
  <div class="top-menu">
    <div class="img-box"></div>
    <ul class="nav-list">
      <li
        class="nav-item"
        :class="item.active==true ? 'active' : ''"
        v-for="item in navList"
        :key="item.id"
        @click="clicked(item.id)"
      >{{item.name}}</li>
    </ul>
    <div class="right">
      <el-input
        size="small"
        placeholder="输入房间号并进入"
        suffix-icon="el-icon-search"
        v-model="topInput"
        @keyup.enter.native="goRoom(topInput)"
      ></el-input>
      <el-dropdown size="mini">
        <img :src="userAvater" alt="#" class="el-dropdown-link">
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>我的消息</el-dropdown-item>
          <el-dropdown-item>设置</el-dropdown-item>
          <el-dropdown-item divided @click.native="outlog">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navList: [
        { id: 0, name: "房间列表", active: true },
        { id: 1, name: "我的文件", active: false }
      ],
      topInput: "", //导航输入框值
      userAvater: ""
    };
  },
  mounted() {
    this.userAvater = window.localStorage.getItem("userimg");
  },
  methods: {
    clicked(id) {
      for (let item of this.navList) {
        if (item.id == id) {
          item.active = true;
          this.$emit("sendTo", item.id);
        } else {
          item.active = false;
        }
      }
    },
    goRoom(roomId) {
      console.log(roomId)
      if (!/^1[34578]\d{9}$/gi.test(roomId)) {
        this.$message({
          type: 'info',
          message: '房间号错误'
        });
      } else {
        this.$router.push({ path: "/white", query: { roomId: "m"+roomId } });
      }
    },
    // 退出登录
    outlog() {
      this.$router.push({ path: '/' })
    }
  }
};
</script>
<style lang="scss">
.top-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  .img-box {
    width: 100px;
    height: 20px;
    background-image: url("../../assets/img/home/21212.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  ul {
    display: flex;
    margin-left: -300px;
    li {
      font-size: 14px;
      padding: 9px 0;
      margin: 0 15px;
      border-bottom: 2px solid rgba(0, 0, 0, 0);
      cursor: pointer;
    }
    .active {
      color: #ee6133;
      border-bottom: 2px solid #ee6133;
    }
  }
  .right {
    display: flex;
    align-items: center;
    img {
      height: 20px;
      margin-left: 30px;
    }
  }
}
</style>
